jQuery - Find Elements and Finish Animations

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

:file Selector

We can get the input with type file with the :file selector.

For example, if we have:

<form>  
  <input type="button" value="Input Button">  
  <input type="checkbox">  
  <input type="file">  
  <input type="hidden">  
  <input type="password">  
  <input type="radio">  
  <input type="reset">  
  <input type="submit">  
  <input type="text">  
  <select>  
    <option>Option</option>  
  </select>  
  <textarea></textarea>  
  <button>Button</button>  
</form>

We can write:

$("input:file").css({  
  background: "yellow",  
  border: "3px red solid"  
});

.filter()

The filter method lets us get the elements that match the select or pass a function test from a set of matched elements.

For example, if we have:

<ul>  
  <li>list item 1</li>  
  <li>list item 2</li>  
  <li>list item 3</li>  
  <li>list item 4</li>  
  <li>list item 5</li>  
  <li>list item 6</li>  
</ul>

We can get the li s that are in an even number position and add a red background to them by writing:

$("li").filter(":nth-child(2n)").css("background-color", "red");

So the 2nd, 4th, and 6th li elements have a red background.

.find()

The .find() method gets the descendants of each element in the current set of matched elements filtered by a selector, jQuery object, or element.

For example, if we have:

<ul class="level-1">  
  <li class="item-i">I</li>  
  <li class="item-ii">II  
    <ul class="level-2">  
      <li class="item-a">A</li>  
      <li class="item-b">B  
        <ul class="level-3">  
          <li class="item-1">1</li>  
          <li class="item-2">2</li>  
          <li class="item-3">3</li>  
        </ul>  
      </li>  
      <li class="item-c">C</li>  
    </ul>  
  </li>  
  <li class="item-iii">III</li>  
</ul>

Then we can get the li ‘s from the li with the class item-ii and add a red background to them by writing:

$("li.item-ii").find("li").css("background-color", "red");

.finish()

The .finish() method stops the currently-running animation, remove all queued animations, and complete all animations for the matched elements.

For example, if we have the following HTML:

<div class="box"></div>  
<div id="path">  
  <button id="go">Go</button>  
  <br>  
  <button id="bf" class="b" onclick="finish()">finish</button>  
</div>

And CSS:

.box {  
  position: absolute;  
  top: 10px;  
  left: 10px;  
  width: 15px;  
  height: 15px;  
  background: black;  
}

Then we can create an animation for the div withn class box when we click on the Go button by writing:

const horiz = $("#path").width() - 20,  
  vert = $("#path").height() - 20;  
$("#go").on("click", function() {  
  $(".box")  
    .clearQueue()  
    .stop()  
    .css({  
      left: 10,  
      top: 10  
    })  
    .animate({  
      top: vert  
    }, 3000)  
    .animate({  
      left: horiz  
    }, 3000)  
    .animate({  
      top: 10  
    }, 3000);  
});

const finish = () => {  
  $("div.box").finish();  
}

The finish function is called when we click on the finish button to skip the animation to the end.

.first()

The .first() method gets the first element from a set of matched elements.

For example, if we have:

<ul>  
  <li>list item 1</li>  
  <li>list item 2</li>  
  <li>list item 3</li>  
  <li>list item 4</li>  
  <li>list item 5</li>  
</ul>

Then we get the first li and add a red background to it by wiring:

$("li").first().css("background-color", "red");

Conclusion

We can get various elements and finish animation with jQuery.